import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Collapse, Divider, Spin, Empty, Row, Col } from 'antd';
import pageStyles from '@/common/pageLayout.less';
import { CaretRightOutlined } from '@ant-design/icons';
import { useContext } from 'react';
import { SupplierLocaldataContext } from '../common';
import { fileDownloadDetail, getColorTextLoadMap, renderRegionText } from '@/utils';
import MyIcon from '@/components/MyIcon';

export const DetailViewLeftInfo: React.FC<SupplierManageAPI.IDetailViewLeftInfo> = ({ supplierCollapseKey, collapseChange }) => {
  /** 获取上下文 */
  const { supplierInfoObj } = useContext(SupplierLocaldataContext);
  console.log(supplierInfoObj, 'supplierInfoObj');

  return (
    <Spin spinning={false}>
      <div className={'commonTabsBodyDom'}>
        <div className="tabsBodyInfoDom">
          <ScrollBarLayout
            style={{
              margin: '5px 0px',
            }}
          >
            <Collapse
              className={pageStyles['commonCollapse']}
              activeKey={supplierCollapseKey}
              bordered={false}
              expandIcon={({ isActive }: any) => {
                return <CaretRightOutlined rotate={isActive ? 90 : 0} />;
              }}
              expandIconPosition="end"
              onChange={collapseChange}
            >
              <Collapse.Panel header={<Divider orientation="left">单位信息</Divider>} key={'InformationPanel'}>
                <div className={pageStyles['commonDlListSty']}>
                  <Row gutter={[20, 20]}>
                    <Col span={10}>
                      <MyIcon type="icon-yingjiqiye" />
                      &nbsp;单位名称：{supplierInfoObj?.fullName || '--'}
                    </Col>
                    <Col span={14}>
                      {/* <MyIcon type="icon-yingjiqiye" />
                      &nbsp;单位简称：{supplierInfoObj?.shortName || '--'} */}
                      <MyIcon type="icon-yingjiqiye" />
                      &nbsp;企业属性：
                      {supplierInfoObj?.enterpriseType == 0
                        ? '大陆'
                        : supplierInfoObj?.enterpriseType == 1
                        ? '港澳台'
                        : supplierInfoObj?.enterpriseType == 2
                        ? '境外'
                        : '--'}
                    </Col>
                    <Col span={10}>
                      <MyIcon type="icon-faren" />
                      &nbsp;法定代表人：{supplierInfoObj?.legalName || '--'}
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-quyu" />
                      {/* &nbsp;所属区域：{renderRegionText(supplierInfoObj)} */}
                      &nbsp;所属区域：{supplierInfoObj?.registerAddress || '--'}
                    </Col>
                    <Col span={10}>
                      <MyIcon type="icon-icon_xinyong_xianxing_jijin-" />
                      &nbsp;统一社会信用代码：{supplierInfoObj?.creditID || '--'}
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-dianhua" />
                      &nbsp;注册电话：{supplierInfoObj?.registerPhone || '--'}
                    </Col>
                    <Col span={10}>
                      <MyIcon type="icon-bankon" />
                      &nbsp;开户行名称：{supplierInfoObj?.bankName || '--'}
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-yyinhangzhanghao" />
                      &nbsp;开户行账号：{supplierInfoObj?.bankAccount || '--'}
                    </Col>
                    <Col span={10}>
                      <MyIcon type="icon-bankon" />
                      &nbsp;银行行号：{supplierInfoObj?.bankCode || '--'}
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-gongsidizhi" />
                      &nbsp;单位地址：{supplierInfoObj?.workAddress || '--'}
                    </Col>
                    <Col span={24} style={{ display: 'flex' }}>
                      <MyIcon type="icon-yingyezhizhao" />
                      &nbsp;营业执照：{fileDownloadDetail(supplierInfoObj?.licenceURL, '/supplierInfoController/downloadFile')}
                    </Col>
                  </Row>
                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-yingjiqiye" />
                      &nbsp;单位名称：
                    </dt>
                    <dd>{supplierInfoObj?.fullName || '--'}</dd>
                    <dt>
                      <MyIcon type="icon-yingjiqiye" />
                      &nbsp;单位简称：
                    </dt>
                    <dd>{supplierInfoObj?.shortName || '--'}</dd>
                  </dl> */}
                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-faren" />
                      &nbsp;法定代表人：
                    </dt>
                    <dd>{supplierInfoObj?.legalName || '--'}</dd>
                    <dt>
                      <MyIcon type="icon-quyu" />
                      &nbsp;所属区域：
                    </dt>
                    <dd>{renderRegionText(supplierInfoObj)}</dd>
                  </dl> */}
                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-icon_xinyong_xianxing_jijin-" />
                      &nbsp;统一社会信用代码：
                    </dt>
                    <dd>{supplierInfoObj?.creditID || '--'}</dd>
                    <dt>
                      <MyIcon type="icon-dianhua" />
                      &nbsp;注册电话：
                    </dt>
                    <dd>{supplierInfoObj?.registerPhone || '--'}</dd>
                  </dl> */}
                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-bankon" />
                      &nbsp;开户行名称：
                    </dt>
                    <dd>{supplierInfoObj?.bankName || '--'}</dd>
                    <dt>
                      <MyIcon type="icon-yyinhangzhanghao" />
                      &nbsp;开户行账号：
                    </dt>
                    <dd>{supplierInfoObj?.bankAccount || '--'}</dd>
                  </dl> */}
                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-gongsidizhi" />
                      &nbsp;单位地址：
                    </dt>
                    <dd>{supplierInfoObj?.workAddress || '--'}</dd>
                  </dl>
                  <dl>
                    <dt>
                      <MyIcon type="icon-yingyezhizhao" />
                      &nbsp;营业执照：
                    </dt>
                    <dd>{fileDownloadDetail(supplierInfoObj?.licenceURL, '/supplierInfoController/downloadFile')}</dd>
                  </dl> */}
                </div>
              </Collapse.Panel>
              {supplierInfoObj?.msupplierContacterList?.length > 0 && (
                <Collapse.Panel header={<Divider orientation="left">联系人信息</Divider>} key={'formCollapsePanelBox'}>
                  <div className={pageStyles['commonDlListSty']}>
                    <Row gutter={[20, 20]}>
                      <Col span={10}>
                        <MyIcon type="icon-faren" />
                        &nbsp;联系人姓名：{supplierInfoObj?.contactName ? getColorTextLoadMap(supplierInfoObj?.contactName)?.colorText : '--'}
                      </Col>
                      <Col span={14}>
                        <MyIcon type="icon-dianhua" />
                        &nbsp;联系人电话：{supplierInfoObj?.contactMobile ? getColorTextLoadMap(supplierInfoObj?.contactMobile)?.colorText : '--'}
                      </Col>

                      {/* <dl>
                      <dt>
                        <MyIcon type="icon-faren" />
                        &nbsp;联系人姓名：
                      </dt>
                      <dd
                        style={{
                          color: getColorTextLoadMap(supplierInfoObj?.contactName)?.color,
                        }}
                      >
                        {supplierInfoObj?.contactName ? getColorTextLoadMap(supplierInfoObj?.contactName)?.colorText : '--'}
                      </dd>
                      <dt>
                        <MyIcon type="icon-dianhua" />
                        &nbsp;联系人电话：
                      </dt>
                      <dd
                        style={{
                          color: getColorTextLoadMap(supplierInfoObj?.contactMobile)?.color,
                        }}
                      >
                        {supplierInfoObj?.contactMobile ? getColorTextLoadMap(supplierInfoObj?.contactMobile)?.colorText : '--'}
                      </dd>
                    </dl> */}
                      {supplierInfoObj?.msupplierContacterList?.map((item, index) => {
                        return (
                          <>
                            <Col span={10}>
                              <MyIcon type="icon-lianxiren" />
                              &nbsp;联系人姓名：{item?.fullName ? item?.fullName : '--'}
                            </Col>
                            <Col span={14}>
                              <MyIcon type="icon-phone" />
                              &nbsp;联系人电话：{item?.phoneMobile ? item?.phoneMobile : '--'}
                            </Col>
                          </>
                          // <dl>
                          //   <dt>
                          //     <MyIcon type="icon-lianxiren" />
                          //     &nbsp;联系人姓名：
                          //   </dt>
                          //   <dd>{item?.fullName ? item?.fullName : '--'}</dd>
                          //   <dt>
                          //     <MyIcon type="icon-phone" />
                          //     &nbsp;联系人电话：
                          //   </dt>
                          //   <dd>{item?.phoneMobile ? item?.phoneMobile : '--'}</dd>
                          // </dl>
                        );
                      })}
                    </Row>
                  </div>
                </Collapse.Panel>
              )}

              <Collapse.Panel header={<Divider orientation="left">创建信息</Divider>} key={'createInfoPanel'}>
                <div className={pageStyles['commonDlListSty']}>
                  <Row gutter={[20, 20]}>
                    <Col span={10}>
                      <MyIcon type="icon-excelupload" />
                      &nbsp;创建类型：
                      <span
                        style={{
                          color: supplierInfoObj?.createType == '0' ? '#faad14' : supplierInfoObj?.createType == '1' ? '#096dd9' : '',
                        }}
                      >
                        {supplierInfoObj?.createType == '0' ? '手动创建' : supplierInfoObj?.createType == '1' ? 'Excel导入' : '--'}
                      </span>
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-time" />
                      &nbsp;创建时间：{supplierInfoObj?.createTime || '--'}
                    </Col>
                    <Col span={10}>
                      <MyIcon type="icon-lianxiren" />
                      &nbsp;创建人：{supplierInfoObj?.createrName || '--'}
                    </Col>
                    <Col span={14}>
                      <MyIcon type="icon-bumen" />
                      &nbsp;创建部门：{supplierInfoObj?.createDepartmentName || '--'}
                    </Col>
                  </Row>

                  {/* <dl>
                    <dt>
                      <MyIcon type="icon-excelupload" />
                      &nbsp;创建类型：
                    </dt>
                    <dd
                      style={{
                        color: supplierInfoObj?.createType == '0' ? '#faad14' : supplierInfoObj?.createType == '1' ? '#096dd9' : '',
                      }}
                    >
                      {supplierInfoObj?.createType == '0' ? '手动创建' : supplierInfoObj?.createType == '1' ? 'Excel导入' : '--'}
                    </dd>
                    <dt>
                      <MyIcon type="icon-time" />
                      &nbsp;创建时间：
                    </dt>
                    <dd>{supplierInfoObj?.createTime || '--'}</dd>
                  </dl>
                  <dl>
                    <dt>
                      <MyIcon type="icon-lianxiren" />
                      &nbsp;创建人：
                    </dt>
                    <dd>{supplierInfoObj?.createrName || '--'}</dd>
                    <dt>
                      <MyIcon type="icon-bumen" />
                      &nbsp;创建部门：
                    </dt>
                    <dd>{supplierInfoObj?.createDepartmentName || '--'}</dd>
                  </dl> */}
                </div>
              </Collapse.Panel>
            </Collapse>
          </ScrollBarLayout>
        </div>
      </div>
    </Spin>
  );
};

{
  /* <Collapse.Panel header={<Divider orientation="left">作废信息</Divider>} key={'canceInfoPanel'}>
                <div className={pageStyles['commonDlListSty']}>
                  {supplierInfoObj?.cancelerID ? (
                    <>
                      <dl>
                        <dt>
                          <MyIcon type="icon-zuofei" />
                          &nbsp;作废类型：
                        </dt>
                        <dd
                          style={{
                            color: getColorTextLoadMap(supplierInfoObj?.cancelTypeName)?.color,
                          }}
                        >
                          {supplierInfoObj?.cancelTypeName ? getColorTextLoadMap(supplierInfoObj?.cancelTypeName)?.colorText : '--'}
                        </dd>
                        <dt>
                          <MyIcon type="icon-time" />
                          &nbsp;作废时间：
                        </dt>
                        <dd>{supplierInfoObj?.cancelTime || '--'}</dd>
                      </dl>
                      <dl>
                        <dt>
                          <MyIcon type="icon-lianxiren" />
                          &nbsp;作废人：
                        </dt>
                        <dd>{supplierInfoObj?.cancelerName || '--'}</dd>
                        <dt>
                          <MyIcon type="icon-bumen" />
                          &nbsp;作废部门：
                        </dt>
                        <dd>{supplierInfoObj?.cancelDepartmentName || '--'}</dd>
                      </dl>
                      <dl>
                        <dt>
                          <MyIcon type="icon-bohuiyuanyinguanli" />
                          &nbsp;作废原因：
                        </dt>
                        <dd>{supplierInfoObj?.cancelReason || '--'}</dd>
                      </dl>
                    </>
                  ) : (
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                  )}
                </div>
              </Collapse.Panel> */
}
